<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <script>
        (function(){
            if( window.top.location.href != window.location.href ) {
                window.top.location.href = window.location.href;
            }
        })();
    </script>
    <style>
       .header{
           position: fixed;
           left:0;
           top:0;
           width:100%;
           height: 64px;
           line-height: 64px;
           background: #424a5d;
           color:#fff;
       }
       .header .headCont{
           padding:0 20px;
       }
       .header .headCont h2{
           font-size:14px;
           font-weight:100;
           cursor: pointer;
       }
       .headCont_r{
           position: relative;
       }
       #headMenu{
           position: absolute;
           top:48px;
           right: -8px;
           background: #fff;
           color:#333;
           opacity:0;
           transition:0.5s;
           /* display:none; */
       }
       #headMenu li:first-child{
           width:68px;
           height:44px;
           text-align:center;
           line-height: 44px;
           border-radius: 4px;
           box-shadow:0 0 6px rgba(0,0,0,0.8);
       }
       #headMenu li a{
         color:#333;
       }
       .wrap{
           height:100%;
           padding-top: 64px;
       }
       .list{
           width:220px;
           border:1px solid #d2d2d2;
           height: 100%;
           padding-bottom:20px;
           background: #424a5d;
       }
       .list ul{
           min-height: 400px;
           max-height:600px;
           overflow-y:auto; 
       }
       .list li{
         background: #424a5d;
         cursor: pointer;

       }
       .list .listTitle{
           height:36px;
           line-height:36px;
           text-align:left;
           padding-left:20px;
           background: #424a5d;
           color:#fff;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
       }
       .list .listmsg {
           display:none;
       }
       .list .listmsg a{
           display:block;
           width: 100%;
           color:#ccc;
           line-height:32px;
           line-height:32px;
           text-align: center;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
           
       }
       .list .listmsg a:hover{
         background: #676f82;
       }
       .com_right{
           margin-left:222px;
           height:100%;
       }
       .com_right iframe{
           width:100%;
           height:100%;
       }
    </style>
</head>
<body>
    <div class="header clearfix">
        <div class="headCont">
            <span class="fl">javascript效果管理</span>
            <div class="fr headCont_r">
                <h2 id="manager">admin</h2>
                <ul id="headMenu">
                    <li>
                        <a href="javascript:;">退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="clearfix wrap">
        <div class="list fl">
            <ul id="menu">
                <!-- <li>
                   <div class="listTitle">玩转属性操作 ></div>
                   <div class="listmsg">
                      <a href="" class="comUrl">揉捏div揉捏div揉捏div揉捏div</a> 
                      <a href="" class="comUrl">揉捏div</a> 
                      <a href="" class="comUrl">揉捏div</a> 
                   </div>
                </li> -->
            </ul>
        </div>
        <div class="com_right">
            <iframe src="乘法表.html" frameborder="0" id="iframe">
                
            </iframe>
        </div>
    </div>
    <script src="js/config.js"></script>
    <script>
        /**
         * https://www.cnblogs.com/sminocence/p/6546891.html
         * **/
        var menu = $('#menu');
        var iframe = $('#iframe');
        var listTitle = menu.getElementsByClassName('listTitle');
        var listmsg = menu.getElementsByClassName('listmsg');
        var comUrl = menu.getElementsByClassName('comUrl');
        var manager = $('#manager');
        var headMenu = $('#headMenu');
        var headMenuLi = $$('#headMenu li')[0];
        var timer = null;
        var bg = '#676f82';
        createLi();
        toUrlFn();
        autoUrl();
        hoverLogout();
        function toUrlFn() {
            for( var i=0;i<listTitle.length;i++ ) {
                listTitle[i].num = i;
                listTitle[i].onOff = true;
                listTitle[i].addEventListener('click',function() {
                     for( var j=0;j<listmsg.length;j++) {
                         if( j != this.num ) {
                            listmsg[j].style.display = 'none';
                            listTitle[j].onOff = true;
                         }
                     }
                     if( this.onOff ) {
                        listmsg[this.num].style.display = 'block';
                     }else{
                        listmsg[this.num].style.display = 'none';
                     }

                    this.onOff = !this.onOff;
                },false);
            }

            /**跳转**/

            for ( var i=0;i<comUrl.length;i++ ) {
                comUrl[i].now = i;
                comUrl[i].onclick = function() {
                    for( var j=0;j<comUrl.length;j++) {
                        comUrl[j].style.background = '';
                    }
                    comUrl[this.now].style.background = bg;
                    var h = getQueryObject(this.getAttribute('_href')).type;
                    var isMoble = this.parentNode.previousSibling.innerHTML;
                 
                    if( isMoble.indexOf('移动端') > -1 ) {
                        location.href = 'mobile.html';
                        store.save('mobileUrl',this.getAttribute('alt'));
                        location.hash = '';
                    }else{
                        iframe.src = this.getAttribute('_href');
                        location.hash =  h;
                    }
                    
                    document.title = this.getAttribute('alt');
                   
                }
            }
           
        }
        function createLi() {
            var str = '';
            var len = listObj.length;
            for( var i=0;i<len;i++) {
                str += '<li> <div class="listTitle"> '+listObj[i].title+'></div><div class="listmsg">';
                for( j=0;j<listObj[i].url.length;j++) {
                    str += '<a href="javascript:;" _href="'+listObj[i].url[j].t+'.html?type='+listObj[i].url[j].type+'" alt="'+listObj[i].url[j].t+'" class="comUrl">'+listObj[i].url[j].t+'</a>';
                }        
                str +='</div></li>';
            }
            menu.innerHTML = str;
        }
        

        /**刷新自动跳转*/
        function autoUrl () {
            var mobileUrl = store.fetch('mobileUrl');
            if(  mobileUrl  ) {
                store.remove('mobileUrl');
            }
            var hash = location.hash.substr(1);
            for ( var i=0;i<comUrl.length;i++ ) {
                var t =  getQueryObject(comUrl[i].getAttribute('_href')).type;
                var msg =  comUrl[i].getAttribute('alt');
                if( t == hash ) {                  
                   comUrl[i].parentNode.previousSibling.click();
                   comUrl[i].style.background = bg;
                   iframe.src = comUrl[i].getAttribute('_href');
                   document.title = msg;
                   break; 
                }
            }
        }
        

        /***退出出的**/
        function hoverLogout() {
            manager.onmouseover = function (){
                clearTimeout(timer);
                headMenu.style.opacity = 1;
            }
            manager.onmouseout = function (){
                timer = setTimeout(function(){
                    headMenu.style.opacity = 0;
                },200);
               
            }
            headMenuLi.onmouseover = function () {
                clearTimeout(timer);
                headMenu.style.opacity = 1;
            }
            headMenuLi.onmouseout = function () {
                timer = setTimeout(function(){
                    headMenu.style.opacity = 0;
                },200);
            }
        }
    </script>
</body>
</html>